<template>
  <el-dialog v-bind="$attrs" body-style="padding:0px" @close="handleClose" @open="handleOpen">
    <el-row class="overflow-y-auto" style="max-height:60vh">
      <el-table
        ref="moduleTable"
        v-loading="listLoading"
        :row-style="{ 'height': '80px' }"
        :show-overflow-tooltip="true"
        :data="ModuleData"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        stripe
      >
        <el-table-column type="selection"/>
        <el-table-column prop="roleId" align="left" :label="$t('system.ram.capability')" width="200">
          <template v-slot="{ row }">
            {{ $t(roleMap[row.roleName].name) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('system.ram.introduction')" prop="roleName" align="left">
          <template v-slot="{ row }">
            <span style="word-break:break-word;">

              {{ $t(roleMap[row.roleName].intro) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <template #footer>

      <span class="dialog-footer">
        <el-button  @click="handleClose">{{ $t('common.cancel') }}</el-button>
        <el-button  type="primary" :loading="confirmLoading" @click="handleConfirm">
          {{ $t('common.confirm') }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

import { editUser } from '@/api/user'
import { listModule } from '@/api/role'

export default {
  props: ['ramInfo'],
  data() {
    return {
      roleMap: {
        'OPERATOR': {
          name: 'system.ram.cap.operator',
          intro: 'system.ram.cap.intro_operator'
        },
        'REPORT': {
          name: 'system.ram.cap.report',
          intro: 'system.ram.cap.intro_report'
        },
        'PI MANAGEMENT': {
          name: 'system.ram.cap.pi_management',
          intro: 'system.ram.cap.intro_pi_management'
        },
        'FLYCARE NOTIFY CONFIG': {
          name: 'system.ram.cap.flycare_notify_config',
          intro: 'system.ram.cap.intro_flycare_notify_config'
        },
        'USER MANAGE': {
          name: 'system.ram.cap.user_manage',
          intro: 'system.ram.cap.intro_user_manage'
        }
      },
      roleId: [],
      ModuleData: [],
      listLoading: false,
      confirmLoading: false,
      form: {
        name: '',
        status: '0',
        userId: null,
        orgId: '',
        userType: 2,
        countryCode: '',
        roleList: [],
        remark: '',
        storeUuid: ''
      },
      orgId: '',
      countryCode: ''

    }
  },
  methods: {
    initSelect() {
      const selectData = []
      if (this.ramInfo.roleList) {
        this.ramInfo.roleList.forEach((role) => {
          this.ModuleData.forEach((row) => {
            if (role.roleId === row.roleId) {
              selectData.push(row)
            }
          })
        })
      }
      return selectData
    },
    handleSelectionChange(val) {
      this.form.roleList = []
      val.forEach((row) => {
        this.form.roleList.push(row)
      })
    },
    handleRowClick(row) {
      this.$refs.moduleTable.toggleRowSelection(row)
    },
    toggleSelection(rows) {
      this.$nextTick(() => {
        if (rows) {
          rows.forEach(row => {
            this.$refs.moduleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.moduleTable.clearSelection()
        }
      })
    },
    getAllModules() {
      this.listLoading = true
      listModule(
        {
          platCode: 'RAM'
        }
      ).then((res) => {
        console.log("res",res)
        this.ModuleData = res
        const rows = this.initSelect()
        console.log(res)
        console.log(rows)
        this.toggleSelection(rows)
      }).catch(this.$confirmError)
        .finally(() => {
          this.listLoading = false
        })
    },

    handleOpen() {
      this.getAllModules()
    },
    handleConfirm() {
      console.log(111, this.ramInfo)
      this.confirmLoading = true
      this.form.userId = this.ramInfo.userId
      this.form.name = this.ramInfo.name
      this.form.orgId = this.ramInfo.orgId
      this.form.countryCode = this.ramInfo.countryCode
      this.form.storeUuid = this.ramInfo.storeUuid
      this.form.remark = this.ramInfo.remark
      this.form.status = this.ramInfo.status
      editUser(this.form).then(() => {
        this.confirmLoading = false
        this.$message.success(
          this.$t('system.ram.edit_success')

        )
        this.$emit('submit')
        this.handleClose()
      }).catch((e) => {
        this.$confirmError(e)
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    handleClose() {
      this.confirmLoading = false
      this.$emit('update:model-value', false)
    }
  }
}
</script>

<style>
</style>
